<template>
  <div>
    <div class="wp1080 cf">
      <el-col :span="24" class="home-instroduce-border cf">
        <div class="home-instroduce">
          <div class="instroduce-left"><span class="rec-title">推荐</span></div>
          <div class="instroduce-content" v-if="index < 7" v-for="(item, index) in dataList.recommend" :key="item.id">
            <div class="content-list">
              <img :src="item.imgUrlIcon" alt=""  @click="toDetail(item.id)" class="cursor">
              <span class="ml10 cursor"  @click="toDetail(item.id)">{{item.name}}</span>
            </div>
          </div>
        </div>
        <div class="home-instroduce">
          <div class="instroduce-left"><span class="hot-title">热门</span></div>
          <div class="instroduce-content2" v-if="index < 8" v-for="(item, index) in dataList.hotTags"  :key="item.id">
            <div class="content-list">
              <span class="width60 cursor" @click="toUp(item.id)">{{item.tagName}}</span>
            </div>
          </div>
        </div>
      </el-col>
      <div class="left-box">
        <el-col :span="24" class="">
          <carsoul-view></carsoul-view>
        </el-col>
        <el-col :span="24" class="right-border height315">
          <div class="left-header">
            <div class="title">
              <div>破解版游戏</div>
              <span @click="toBreak('/breaks')">+更多</span>
            </div>
          </div>
          <div class="leftList">
            <el-col :span="8" v-if="index < 6" v-for="(item, index) in dataList.crack" :key="item.id">
              <leftList-view :child-msg="item"></leftList-view>
            </el-col>
          </div>
        </el-col>
        <el-col :span="24" class="right-border height315">
          <div class="left-header">
            <div class="title">
              <div>汉化版游戏</div>
              <span @click="toBreak('/breaks')">+更多</span>
            </div>
          </div>
          <div class="leftList">
            <el-col :span="8" v-if="index < 6" v-for="(item, index) in dataList.chinesize" :key="item.id">
              <leftList-view :child-msg="item"></leftList-view>
            </el-col>
          </div>
        </el-col>
      </div>
      <div  class="cf right-box">
        <div class="right-border" style="height: 420px;overflow: hidden;box-sizing: border-box;">
          <div class="right-title">每日推荐</div>
          <el-col :span="24" v-if="index < 2" v-for="(item, index) in dataList.recommend" :key="item.id">
            <everyDay-view :child-msg="item"></everyDay-view>
          </el-col>
          <!--<div>-->
          <a href="../../static/img/downLoad.png" download>
            <img src="../../static/img/downLoad.png" style="width: 100%;height: 80px;" alt="">
          </a>
          <!--</div>-->
        </div>
        <div class="right-border" style="height: 550px;overflow: hidden;box-sizing: border-box;">
          <div class="right-title">大家都在玩</div>
          <el-col :span="24" v-for="item in dataList.allplay" :key="item.id">
            <introduceList-view @toDetail="toDetail" :child-msg="item"></introduceList-view>
          </el-col>
        </div>
      </div>
      <el-col :span="24" class="cf right-border">
        <div class="left-header">
          <div class="title">
            <div>BT网游</div>
            <span @click="toClassify('BTgame')">+更多</span>
          </div>
        </div>
        <el-col :span="4" v-if="index < 6" v-for="(item, index) in dataList.btweb" :key="item.id">
          <recomendList-view :child-msg="item"></recomendList-view>
        </el-col>
      </el-col>
      <el-col :span="24" class="cf right-border">
        <div class="left-header">
          <div class="title">
            <div>精品网游</div>
            <span @click="toClassify('online')">+更多</span>
          </div>
        </div>
        <el-col :span="4" v-if="index < 6" v-for="(item, index) in dataList.btweb" :key="item.id">
          <recomendList-view :child-msg="item"></recomendList-view>
        </el-col>
      </el-col>
      <el-col :span="24" class="cf right-border">
        <el-col :span="8" class="boxShadow pd20">
          <div class="left-header">
            <div class="title">
              热门游戏排行
            </div>
          </div>
          <el-col :span="24" v-if="index < 10" v-for="(item, index) in dataList.hotList" :key="item.id">
            <rankList-view :child-msg="item" :child-index="index"></rankList-view>
          </el-col>
        </el-col>
        <el-col :span="8" class="boxShadow pd20">
          <div class="left-header">
            <div class="title">
              新游飙升排行
            </div>
          </div>
          <el-col :span="24" v-if="index < 10" v-for="(item, index) in dataList.hotList" :key="item.id">
            <rankList-view :child-msg="item" :child-index="index"></rankList-view>
          </el-col>
        </el-col>
        <el-col :span="8" class="boxShadow pd20">
          <div class="left-header">
            <div class="title">
              好评游戏排行
            </div>
          </div>
          <el-col :span="24" v-if="index < 10" v-for="(item, index) in dataList.hotList" :key="item.id">
            <rankList-view :child-msg="item" :child-index="index"></rankList-view>
          </el-col>
        </el-col>
      </el-col>
    </div>
    <Footers-view></Footers-view>
  </div>
</template>

<script>
import myCarsos from '../components/carsoul.vue'
import leftList from '../components/leftList.vue'
import rightButton from '../components/rightButton.vue'
import introduceList from '../components/introduceList.vue'
import recomendList from '../components/recomendList.vue'
import rankList from '../components/rankList.vue'
import everyDay from '../components/everyDay.vue'
import rootPath from '../components/rootPath.vue'
// import { Loading } from 'element-ui'
import Footers from '../components/Footers.vue'
export default {
  name: 'homes',
  components: {
    'leftList-view': leftList,
    'rightButton-view': rightButton,
    'rootPath-view': rootPath,
    'carsoul-view': myCarsos,
    'recomendList-view': recomendList,
    'rankList-view': rankList,
    'everyDay-view': everyDay,
    'introduceList-view': introduceList,
    'Footers-view': Footers
  },
  data () {
    return {
      type: 'new',
      current: '汉化破解',
      dataList: {
        hotList: [],
        crack: [],
        chinesize: [],
        btweb: [],
        allplay: []
      },
      classify: {
        type: '游戏分类',
        data: [
          {
            name: '全部',
            has: false
          },
          {
            name: '角色扮演',
            has: false
          },
          {
            name: '动作',
            has: false
          },
          {
            name: '全部',
            has: false
          },
          {
            name: '全部',
            has: false
          },
          {
            name: '全部',
            has: false
          }
        ]
      },
      changeType: [],
      everyDay: []
    }
  },
  created () {
    // let loadingInstance = Loading.service({fullscreen: true, spinner: 'el-icon-loading', background: 'rgba(255,255,255, 0.8)'})
    // let LocalAPI = 'http://192.168.0.101:8080/pc/pchome?id=' + this.id
    let homeAPI = 'pc/pchome'
    let that = this
    this.$request.get(homeAPI, false,
      function (res) {
        if (res.data.code === 1000) {
          // loadingInstance.close()
          console.log(1)
          that.dataList = res.data.rst
          console.log(that.dataList)
        }
      }
    )
  },
  methods: {
    toDetail (id) {
      this.$router.push({path: '/detail', query: {userId: id}})
    },
    toUp (id) {
      this.$router.push({path: '/classify', query: {tag: id}})
    },
    toBreak (path) {
      this.$router.push({path: path})
    },
    toClassify (type) {
      console.log(type)
      this.$router.push({path: '/' + type})
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 通过 `vm` 访问组件实例
      // console.log(vm)
    })
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  }
}
</script>
<style scoped>
  .left-header .title {
    height: 30px;
    line-height: 30px;
    width: 100%;
    padding: 0 0 15px 0;
  }

  .left-header div {
    float: left;
    color: rgba(115, 115, 115, 1);
    font-size: 20px;
    text-align: left;
    font-family: Roboto;
  }

  .left-header span {
    cursor: pointer;
    float: right;
    color: rgba(115, 115, 115, 1);
    font-size: 14px;
    text-align: right;
    font-family: Roboto;
  }

  .leftList {
    clear: both;
  }

  .home-instroduce-border {
    background-color: white;
    text-align: center;
    box-shadow: 0px 0px 3px 0px rgba(229, 229, 229, 1);
    margin: 20px 0;
  }

  .home-instroduce {
    display: flex;
    flex-direction: row;
    height: 50px;
    line-height: 50px;
  }

  .home-instroduce .instroduce-left {
    flex: 0 0 55px;
    margin: 0 10px 0 8px;
  }

  .home-instroduce .instroduce-content {
    flex: 1;
    display: flex;
    flex-direction: row;
  }
  .home-instroduce .instroduce-content2{
    display:flex;
    margin-right: 10px;
  }
  .home-instroduce .content-list {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .home-instroduce .content-list img {
    width: 30px;
    height: 30px;
  }

  .home-instroduce .content-list  span {
    width: 95px;
    color: rgba(115, 115, 115, 1);
    font-size: 14px;
    text-align: left;
    font-family: Roboto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .home-instroduce .instroduce-content2 .content-list .width60{
    width: auto;
    color: rgba(115, 115, 115, 1);
    font-size: 14px;
    text-align: left;
    font-family: Roboto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right:20px;
  }
  .ml10 {
    margin-left: 10px;
  }

  .title div {
    font-weight: bold;
  }

  .boxShadow {
    box-shadow: 0 0 3px 0 rgba(219, 219, 219, 1);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
  }

  .pd20 {
    padding: 20px;
  }
  .hot-title,.rec-title{
   display: inline-block;
    width:50px;
    height: 30px;
    line-height: 30px;
    position: relative;
    color: #fff;
  }
  .hot-title{
    background:#009688;
  }
  .hot-title:after, .rec-title:after{
    content:"";
    width:0;
    height:0;
    position:absolute;
    left:50px;
    top:10px;
    border-top:solid 5px transparent;
    border-bottom:solid 5px transparent;
  }
  .hot-title:after{
    border-left:solid 5px #009688;     /* 小三角形 */
  }
  .rec-title:after{
    border-left:solid 5px #FF9800;     /* 小三角形 */
  }
  .rec-title{
    background:#FF9800;
  }
  .left-box{
    float:left;
    width:720px;
  }
  .right-box{
    float:right;
    width:340px;
  }
  .cursor{
    cursor:pointer;
  }
</style>
